import React from 'react';
import { observer, inject } from 'mobx-react';
import { toJS } from 'mobx';
import {
    WeaSlideModal,
    WeaFormItem,
    WeaInput,
    WeaTextarea,
	WeaPopoverHrm,
	WeaForm,
	WeaError, WeaLocaleProvider
} from 'ecCom';
import classNames from 'classnames';
import { Button, Popover, Icon, Modal } from 'antd';
import _ from 'lodash';
import SelectRemindPerson from './SelectRemindPerson';
import './index.less';
const getLabel = WeaLocaleProvider.getLabel;
@inject('edcDataDesignerStore')
@observer
export default class RemindPerson extends React.Component {
	constructor(props) {
		super(props);

		const { edcDataDesignerStore: store } = this.props;

		this.store = store;
	}

    componentWillMount() {
        const { edcDataDesignerStore: store } = this.props;

        this.store = store;
	}

	componentWillReceiveProps(nextProps) {
		const { getAllRemindPerson, resertRemind } = this.store;

		if (nextProps.visible !== this.props.visible && nextProps.visible ) {
			resertRemind();
			getAllRemindPerson();
		}
	}
	
	getTitle = () => {
		const { toggleReminDialogVisible:onClose, fillLoading } = this.store;

		return (
			<div>
				<div className="title-close-div">
					<div onClick={onClose}>
						<span className="title-close"/>
						{getLabel(523490, '提醒填写人员')}
					</div>
					<div>
						<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@15b44c`} 
							type='primary' 
							onClick={this.fillinRemind}
							loading={fillLoading}
						>
							{getLabel(527118,'发送')}
						</Button>
					</div>
				</div>
			</div>
		);
	}

	getPoverContent = () => {
		const { allPerson, remindPerson } = this.store;

		return  allPerson.map(person => {
			if (!!~remindPerson.indexOf(person.id)) {
				return (
					<li>
						<span>
							<a href={`javaScript:openhrm(${person.id})`} onClick={e => window.pointerXY(e)} >{person.lastname}</a>
						</span>
						<span>
							{person.departmentName}
						</span>
					</li>
				) 
			}
		});
	}

	del = () => {
		const { selectRemindPerson } = this.store;

		selectRemindPerson([]);
	}

    renderContent = () => {
		const {
			showSelectRemindPerson,
			remindInfo,
			onReminInfoChange,
			remindPerson,
			unSubmitPerson,
			allPerson,
			selectRemindPersonVisible,
			remindTip
		} = this.store;

		let value = '';

		if (remindTip === 'UNSUBMIT' && remindPerson.length) {
			value = getLabel('527678','已选择未填写人员，共$remindPersonSize$人').replace("$remindPersonSize$",remindPerson.length);
		} else if (remindTip === 'ALL' && remindPerson.length) {
			value = getLabel('527679','已选择全部人员，共$remindPersonSize$人').replace("$remindPersonSize$",remindPerson.length);
		} else if (remindTip === 'ASSIGN' && remindPerson.length) {
			value = getLabel('527680','已选择指定人员，共$remindPersonSize$人').replace("$remindPersonSize$",remindPerson.length);
		}

		const content = remindInfo.content.replace(/\n/g, "<br/>");

        return (
            <div className='content'>
				<WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@4c4hlx`} />
				<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@armb5o`}
					label={getLabel(523509,'提醒方式')}
					labelCol={{span: 4}}
					wrapperCol={{span: 20}}
					tipPosition='bottom'
				>
					<span className='send-type'>{getLabel(523510,'消息提醒')}</span>
				</WeaFormItem>
				<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@44xzj2`}
					label={getLabel(526529,'消息标题')}
					labelCol={{span: 4}}
					wrapperCol={{span: 20}}
					tipPosition='bottom'
				>
					<WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@lyyyqp`} tipPosition = 'bottom' ref='titleError' error={getLabel(527119,'消息标题为空')}>
						<WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@4u5phz`} 
							palceholder={getLabel(527120,'请输入消息标题')}
							value={remindInfo.title}
							onChange={value => onReminInfoChange('title', value)}
							viewAttr='3'
							ref = 'title'
						/>
					</WeaError>
				</WeaFormItem>
				<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@5ftvrz`}
					label={getLabel(523512,'消息描述')}
					labelCol={{span: 4}}
					wrapperCol={{span: 20}}
					tipPosition = 'bottom'
				>
					<WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@awr0r4`} tipPosition = 'bottom' ref='contentError' error='消息描述为空' >
						<WeaTextarea ecId={`${this && this.props && this.props.ecId || ''}_WeaTextarea@6ibt5c`} 
							palceholder={getLabel(527121,'请输入消息描述')}
							value={remindInfo.content}
							minRows={4}
							maxRows={4}
							onChange={value => onReminInfoChange('content', value)}
							viewAttr='3'
							ref='content'
						/>
					</WeaError>
				</WeaFormItem>
				<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@yidgch`}
					label={getLabel(523514,'消息样式预览')}
					labelCol={{span: 4}}
					wrapperCol={{span: 20}}
				>
					<div className='msg-per'>
						<div className='msg'>
							<span className='mode'>{getLabel(527116,'数据中心')}</span>
							<span className='title'>{remindInfo.title}</span>
							<span className='desc' dangerouslySetInnerHTML={{__html: content}}></span>
							<span className='more'>
								<b>{getLabel(523515,'阅读详情')}</b>
								<i className="icon-coms-Right" />
							</span>
						</div>
					</div>
				</WeaFormItem>
				<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@ceygm9`}
					label={getLabel(523513,'接收人')}
					labelCol={{span: 4}}
					wrapperCol={{span: 20}}
					tipPosition='bottom'
				>
					<WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@82bm1g`} tipPosition = 'bottom' ref='personError' error={getLabel('503670','接收人为空')}>
						<span className={classNames('remind-person', { 'remind-person-tip': !value })}>
							<Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@f9aihz`} 
								placement="bottom"
								content={this.getPoverContent()} 
								trigger="click"
								overlayClassName='wea-edc-person-list'
							>
								<span>
									{value}
								</span>
							</Popover>
							{ 	value ? 
								<Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@rnl2dx`} type="cross" onClick={this.del}/> : null
							}
						
							<i className='anticon anticon-search' onClick={showSelectRemindPerson} />
						</span>
					</WeaError>
				</WeaFormItem>
				<SelectRemindPerson ecId={`${this && this.props && this.props.ecId || ''}_SelectRemindPerson@l27m5a`} visible={selectRemindPersonVisible} />
            </div>
        )
	}
	
	fillinRemind = () => {
		const {
			fillinRemind,
			remindPerson,
			remindInfo,
			appid
		} = this.store;

		if (!remindInfo.title.trim() || !remindInfo.content.trim() || !toJS(remindPerson).length) {
			if (!remindInfo.title.trim()) {
				this.refs.titleError.showError();
			}
			if (!remindInfo.content.trim()) {
				this.refs.contentError.showError();
			}
			if (!toJS(remindPerson).length) {
				this.refs.personError.showError();
			}
		} else {
			Modal.confirm({
				content: getLabel(523507,'是否发送消息提醒'),
				onOk() {
					fillinRemind({
						appid,
						title: remindInfo.title,
						content: remindInfo.content,
						type: 'MSGCENTER',
						receiver: remindPerson.join(',')
					});
				}
			});
			
		}	
	}

  render () {
    const { remindDialogVisible:visible, toggleReminDialogVisible:onClose } = this.store;

    return (
        <WeaSlideModal ecId={`${this && this.props && this.props.ecId || ''}_WeaSlideModal@nynjsd`}
            onClose={onClose}
            className="edc-remind-person"
            visible={visible}
            width={'800'}
            height={100}
            direction={'right'}
            measureY={'%'}
            title={this.getTitle()}
            content={this.renderContent()}
            hasScroll={false}
        /> 
    )
  }
}